"); // Chrome scrolls the parent document for some reason after the write to the cloned window??? restoreOwnerScroll(this.referenceElement.ownerDocument, scrollX, scrollY); documentClone.replaceChild(documentClone.adoptNode(this.documentElement), documentClone.documentElement); documentClone.close(); return iframeLoad; }; DocumentCloner.prototype.createElementClone = function (node) { if (isDebugging(node, 2 /* CLONE */)) { debugger; } if (isCanvasElement(node)) { return this.createCanvasClone(node); } if (isVideoElement(node)) { return this.createVideoClone(node); } if (isStyleElement(node)) { return this.createStyleClone(node); } var clone = node.cloneNode(false); if (isImageElement(clone)) { if (isImageElement(node) && node.currentSrc && node.currentSrc !== node.src) { clone.src = node.currentSrc; clone.srcset = ''; } if (clone.loading === 'lazy') { clone.loading = 'eager'; } } if (isCustomElement(clone)) { return this.createCustomElementClone(clone); } return clone; }; DocumentCloner.prototype.createCustomElementClone = function (node) { var clone = document.createElement('html2canvascustomelement'); copyCSSStyles(node.style, clone); return clone; }; DocumentCloner.prototype.createStyleClone = function (node) { try { var sheet = node.sheet; if (sheet && sheet.cssRules) { var css = [].slice.call(sheet.cssRules, 0).reduce(function (css, rule) { if (rule && typeof rule.cssText === 'string') { return css + rule.cssText; } return css; }, ''); var style = node.cloneNode(false); style.textContent = css; return style; } } catch (e) { // accessing node.sheet.cssRules throws a DOMException this.context.logger.error('Unable to access cssRules property', e); if (e.name !== 'SecurityError') { throw e; } } return node.cloneNode(false); }; DocumentCloner.prototype.createCanvasClone = function (canvas) { var _a; if (this.options.inlineImages && canvas.ownerDocument) { var img = canvas.ownerDocument.createElement('img'); try { img.src = canvas.toDataURL(); return img; } catch (e) { this.context.logger.info("Unable to inline canvas contents, canvas is tainted", canvas); } } var clonedCanvas = canvas.cloneNode(false); try { clonedCanvas.width = canvas.width; clonedCanvas.height = canvas.height; var ctx = canvas.getContext('2d'); var clonedCtx = clonedCanvas.getContext('2d'); if (clonedCtx) { if (!this.options.allowTaint && ctx) { clonedCtx.putImageData(ctx.getImageData(0, 0, canvas.width, canvas.height), 0, 0); } else { var gl = (_a = canvas.getContext('webgl2')) !== null && _a !== void 0 ? _a : canvas.getContext('webgl'); if (gl) { var attribs = gl.getContextAttributes(); if ((attribs === null || attribs === void 0 ? void 0 : attribs.preserveDrawingBuffer) === false) { this.context.logger.warn('Unable to clone WebGL context as it has preserveDrawingBuffer=false', canvas); } } clonedCtx.drawImage(canvas, 0, 0); } } return clonedCanvas; } catch (e) { this.context.logger.info("Unable to clone canvas as it is tainted", canvas); } return clonedCanvas; }; DocumentCloner.prototype.createVideoClone = function (video) { var canvas = video.ownerDocument.createElement('canvas'); canvas.width = video.offsetWidth; canvas.height = video.offsetHeight; var ctx = canvas.getContext('2d'); try { if (ctx) { ctx.drawImage(video, 0, 0, canvas.width, canvas.height); if (!this.options.allowTaint) { ctx.getImageData(0, 0, canvas.width, canvas.height); } } return canvas; } catch (e) { this.context.logger.info("Unable to clone video as it is tainted", video); } var blankCanvas = video.ownerDocument.createElement('canvas'); blankCanvas.width = video.offsetWidth; blankCanvas.height = video.offsetHeight; return blankCanvas; }; DocumentCloner.prototype.appendChildNode = function (clone, child, copyStyles) { if (!isElementNode(child) || (!isScriptElement(child) && !child.hasAttribute(IGNORE_ATTRIBUTE) && (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child)))) { if (!this.options.copyStyles || !isElementNode(child) || !isStyleElement(child)) { clone.appendChild(this.cloneNode(child, copyStyles)); } } }; DocumentCloner.prototype.cloneChildNodes = function (node, clone, copyStyles) { var _this = this; for (var child = node.shadowRoot ? node.shadowRoot.firstChild : node.firstChild; child; child = child.nextSibling) { if (isElementNode(child) && isSlotElement(child) && typeof child.assignedNodes === 'function') { var assignedNodes = child.assignedNodes(); if (assignedNodes.length) { assignedNodes.forEach(function (assignedNode) { return _this.appendChildNode(clone, assignedNode, copyStyles); }); } } else { this.appendChildNode(clone, child, copyStyles); } } }; DocumentCloner.prototype.cloneNode = function (node, copyStyles) { if (isTextNode(node)) { return document.createTextNode(node.data); } if (!node.ownerDocument) { return node.cloneNode(false); } var window = node.ownerDocument.defaultView; if (window && isElementNode(node) && (isHTMLElementNode(node) || isSVGElementNode(node))) { var clone = this.createElementClone(node); clone.style.transitionProperty = 'none'; var style = window.getComputedStyle(node); var styleBefore = window.getComputedStyle(node, ':before'); var styleAfter = window.getComputedStyle(node, ':after'); if (this.referenceElement === node && isHTMLElementNode(clone)) { this.clonedReferenceElement = clone; } if (isBodyElement(clone)) { createPseudoHideStyles(clone); } var counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style)); var before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE); if (isCustomElement(node)) { copyStyles = true; } if (!isVideoElement(node)) { this.cloneChildNodes(node, clone, copyStyles); } if (before) { clone.insertBefore(before, clone.firstChild); } var after = this.resolvePseudoContent(node, clone, styleAfter, PseudoElementType.AFTER); if (after) { clone.appendChild(after); } this.counters.pop(counters); if ((style && (this.options.copyStyles || isSVGElementNode(node)) && !isIFrameElement(node)) || copyStyles) { copyCSSStyles(style, clone); } if (node.scrollTop !== 0 || node.scrollLeft !== 0) { this.scrolledElements.push([clone, node.scrollLeft, node.scrollTop]); } if ((isTextareaElement(node) || isSelectElement(node)) && (isTextareaElement(clone) || isSelectElement(clone))) { clone.value = node.value; } return clone; } return node.cloneNode(false); }; DocumentCloner.prototype.resolvePseudoContent = function (node, clone, style, pseudoElt) { var _this = this; if (!style) { return; } var value = style.content; var document = clone.ownerDocument; if (!document || !value || value === 'none' || value === '-moz-alt-content' || style.display === 'none') { return; } this.counters.parse(new CSSParsedCounterDeclaration(this.context, style)); var declaration = new CSSParsedPseudoDeclaration(this.context, style); var anonymousReplacedElement = document.createElement('html2canvaspseudoelement'); copyCSSStyles(style, anonymousReplacedElement); declaration.content.forEach(function (token) { if (token.type === 0 /* STRING_TOKEN */) { anonymousReplacedElement.appendChild(document.createTextNode(token.value)); } else if (token.type === 22 /* URL_TOKEN */) { var img = document.createElement('img'); img.src = token.value; img.style.opacity = '1'; anonymousReplacedElement.appendChild(img); } else if (token.type === 18 /* FUNCTION */) { if (token.name === 'attr') { var attr = token.values.filter(isIdentToken); if (attr.length) { anonymousReplacedElement.appendChild(document.createTextNode(node.getAttribute(attr[0].value) || '')); } } else if (token.name === 'counter') { var _a = token.values.filter(nonFunctionArgSeparator), counter = _a[0], counterStyle = _a[1]; if (counter && isIdentToken(counter)) { var counterState = _this.counters.getCounterValue(counter.value); var counterType = counterStyle && isIdentToken(counterStyle) ? listStyleType.parse(_this.context, counterStyle.value) : 3 /* DECIMAL */; anonymousReplacedElement.appendChild(document.createTextNode(createCounterText(counterState, counterType, false))); } } else if (token.name === 'counters') { var _b = token.values.filter(nonFunctionArgSeparator), counter = _b[0], delim = _b[1], counterStyle = _b[2]; if (counter && isIdentToken(counter)) { var counterStates = _this.counters.getCounterValues(counter.value); var counterType_1 = counterStyle && isIdentToken(counterStyle) ? listStyleType.parse(_this.context, counterStyle.value) : 3 /* DECIMAL */; var separator = delim && delim.type === 0 /* STRING_TOKEN */ ? delim.value : ''; var text = counterStates .map(function (value) { return createCounterText(value, counterType_1, false); }) .join(separator); anonymousReplacedElement.appendChild(document.createTextNode(text)); } } else ; } else if (token.type === 20 /* IDENT_TOKEN */) { switch (token.value) { case 'open-quote': anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, _this.quoteDepth++, true))); break; case 'close-quote': anonymousReplacedElement.appendChild(document.createTextNode(getQuote(declaration.quotes, --_this.quoteDepth, false))); break; default: // safari doesn't parse string tokens correctly because of lack of quotes anonymousReplacedElement.appendChild(document.createTextNode(token.value)); } } }); anonymousReplacedElement.className = PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER; var newClassName = pseudoElt === PseudoElementType.BEFORE ? " " + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE : " " + PSEUDO_HIDE_ELEMENT_CLASS_AFTER; if (isSVGElementNode(clone)) { clone.className.baseValue += newClassName; } else { clone.className += newClassName; } return anonymousReplacedElement; }; DocumentCloner.destroy = function (container) { if (container.parentNode) { container.parentNode.removeChild(container); return true; } return false; }; return DocumentCloner; }()); var PseudoElementType; (function (PseudoElementType) { PseudoElementType[PseudoElementType["BEFORE"] = 0] = "BEFORE"; PseudoElementType[PseudoElementType["AFTER"] = 1] = "AFTER"; })(PseudoElementType || (PseudoElementType = {})); var createIFrameContainer = function (ownerDocument, bounds) { var cloneIframeContainer = ownerDocument.createElement('iframe'); cloneIframeContainer.className = 'html2canvas-container'; cloneIframeContainer.style.visibility = 'hidden'; cloneIframeContainer.style.position = 'fixed'; cloneIframeContainer.style.left = '-10000px'; cloneIframeContainer.style.top = '0px'; cloneIframeContainer.style.border = '0'; cloneIframeContainer.width = bounds.width.toString(); cloneIframeContainer.height = bounds.height.toString(); cloneIframeContainer.scrolling = 'no'; // ios won't scroll without it cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true'); ownerDocument.body.appendChild(cloneIframeContainer); return cloneIframeContainer; }; var imageReady = function (img) { return new Promise(function (resolve) { if (img.complete) { resolve(); return; } if (!img.src) { resolve(); return; } img.onload = resolve; img.onerror = resolve; }); }; var imagesReady = function (document) { return Promise.all([].slice.call(document.images, 0).map(imageReady)); }; var iframeLoader = function (iframe) { return new Promise(function (resolve, reject) { var cloneWindow = iframe.contentWindow; if (!cloneWindow) { return reject("No window assigned for iframe"); } var documentClone = cloneWindow.document; cloneWindow.onload = iframe.onload = function () { cloneWindow.onload = iframe.onload = null; var interval = setInterval(function () { if (documentClone.body.childNodes.length > 0 && documentClone.readyState === 'complete') { clearInterval(interval); resolve(iframe); } }, 50); }; }); }; var ignoredStyleProperties = [ 'all', 'd', 'content' // Safari shows pseudoelements if content is set ]; var copyCSSStyles = function (style, target) { // Edge does not provide value for cssText for (var i = style.length - 1; i >= 0; i--) { var property = style.item(i); if (ignoredStyleProperties.indexOf(property) === -1) { target.style.setProperty(property, style.getPropertyValue(property)); } } return target; }; var serializeDoctype = function (doctype) { var str = ''; if (doctype) { str += ''; } return str; }; var restoreOwnerScroll = function (ownerDocument, x, y) { if (ownerDocument && ownerDocument.defaultView && (x !== ownerDocument.defaultView.pageXOffset || y !== ownerDocument.defaultView.pageYOffset)) { ownerDocument.defaultView.scrollTo(x, y); } }; var restoreNodeScroll = function (_a) { var element = _a[0], x = _a[1], y = _a[2]; element.scrollLeft = x; element.scrollTop = y; }; var PSEUDO_BEFORE = ':before'; var PSEUDO_AFTER = ':after'; var PSEUDO_HIDE_ELEMENT_CLASS_BEFORE = '___html2canvas___pseudoelement_before'; var PSEUDO_HIDE_ELEMENT_CLASS_AFTER = '___html2canvas___pseudoelement_after'; var PSEUDO_HIDE_ELEMENT_STYLE = "{\n content: \"\" !important;\n display: none !important;\n}"; var createPseudoHideStyles = function (body) { createStyles(body, "." + PSEUDO_HIDE_ELEMENT_CLASS_BEFORE + PSEUDO_BEFORE + PSEUDO_HIDE_ELEMENT_STYLE + "\n ." + PSEUDO_HIDE_ELEMENT_CLASS_AFTER + PSEUDO_AFTER + PSEUDO_HIDE_ELEMENT_STYLE); }; var createStyles = function (body, styles) { var document = body.ownerDocument; if (document) { var style = document.createElement('style'); style.textContent = styles; body.appendChild(style); } }; var CacheStorage = /** @class */ (function () { function CacheStorage() { } CacheStorage.getOrigin = function (url) { var link = CacheStorage._link; if (!link) { return 'about:blank'; } link.href = url; link.href = link.href; // IE9, LOL! - http://jsfiddle.net/niklasvh/2e48b/ return link.protocol + link.hostname + link.port; }; CacheStorage.isSameOrigin = function (src) { return CacheStorage.getOrigin(src) === CacheStorage._origin; }; CacheStorage.setContext = function (window) { CacheStorage._link = window.document.createElement('a'); CacheStorage._origin = CacheStorage.getOrigin(window.location.href); }; CacheStorage._origin = 'about:blank'; return CacheStorage; }()); var Cache = /** @class */ (function () { function Cache(context, _options) { this.context = context; this._options = _options; // eslint-disable-next-line @typescript-eslint/no-explicit-any this._cache = {}; } Cache.prototype.addImage = function (src) { var result = Promise.resolve(); if (this.has(src)) { return result; } if (isBlobImage(src) || isRenderable(src)) { (this._cache[src] = this.loadImage(src)).catch(function () { // prevent unhandled rejection }); return result; } return result; }; // eslint-disable-next-line @typescript-eslint/no-explicit-any Cache.prototype.match = function (src) { return this._cache[src]; }; Cache.prototype.loadImage = function (key) { return __awaiter(this, void 0, void 0, function () { var isSameOrigin, useCORS, useProxy, src; var _this = this; return __generator(this, function (_a) { switch (_a.label) { case 0: isSameOrigin = CacheStorage.isSameOrigin(key); useCORS = !isInlineImage(key) && this._options.useCORS === true && FEATURES.SUPPORT_CORS_IMAGES && !isSameOrigin; useProxy = !isInlineImage(key) && !isSameOrigin && !isBlobImage(key) && typeof this._options.proxy === 'string' && FEATURES.SUPPORT_CORS_XHR && !useCORS; if (!isSameOrigin && this._options.allowTaint === false && !isInlineImage(key) && !isBlobImage(key) && !useProxy && !useCORS) { return [2 /*return*/]; } src = key; if (!useProxy) return [3 /*break*/, 2]; return [4 /*yield*/, this.proxy(src)]; case 1: src = _a.sent(); _a.label = 2; case 2: this.context.logger.debug("Added image " + key.substring(0, 256)); return [4 /*yield*/, new Promise(function (resolve, reject) { var img = new Image(); img.onload = function () { return resolve(img); }; img.onerror = reject; //ios safari 10.3 taints canvas with data urls unless crossOrigin is set to anonymous if (isInlineBase64Image(src) || useCORS) { img.crossOrigin = 'anonymous'; } img.src = src; if (img.complete === true) { // Inline XML images may fail to parse, throwing an Error later on setTimeout(function () { return resolve(img); }, 500); } if (_this._options.imageTimeout > 0) { setTimeout(function () { return reject("Timed out (" + _this._options.imageTimeout + "ms) loading image"); }, _this._options.imageTimeout); } })]; case 3: return [2 /*return*/, _a.sent()]; } }); }); }; Cache.prototype.has = function (key) { return typeof this._cache[key] !== 'undefined'; }; Cache.prototype.keys = function () { return Promise.resolve(Object.keys(this._cache)); }; Cache.prototype.proxy = function (src) { var _this = this; var proxy = this._options.proxy; if (!proxy) { throw new Error('No proxy defined'); } var key = src.substring(0, 256); return new Promise(function (resolve, reject) { var responseType = FEATURES.SUPPORT_RESPONSE_TYPE ? 'blob' : 'text'; var xhr = new XMLHttpRequest(); xhr.onload = function () { if (xhr.status === 200) { if (responseType === 'text') { resolve(xhr.response); } else { var reader_1 = new FileReader(); reader_1.addEventListener('load', function () { return resolve(reader_1.result); }, false); reader_1.addEventListener('error', function (e) { return reject(e); }, false); reader_1.readAsDataURL(xhr.response); } } else { reject("Failed to proxy resource " + key + " with status code " + xhr.status); } }; xhr.onerror = reject; var queryString = proxy.indexOf('?') > -1 ? '&' : '?'; xhr.open('GET', "" + proxy + queryString + "url=" + encodeURIComponent(src) + "&responseType=" + responseType); if (responseType !== 'text' && xhr instanceof XMLHttpRequest) { xhr.responseType = responseType; } if (_this._options.imageTimeout) { var timeout_1 = _this._options.imageTimeout; xhr.timeout = timeout_1; xhr.ontimeout = function () { return reject("Timed out (" + timeout_1 + "ms) proxying " + key); }; } xhr.send(); }); }; return Cache; }()); var INLINE_SVG = /^data:image\/svg\+xml/i; var INLINE_BASE64 = /^data:image\/.*;base64,/i; var INLINE_IMG = /^data:image\/.*/i; var isRenderable = function (src) { return FEATURES.SUPPORT_SVG_DRAWING || !isSVG(src); }; var isInlineImage = function (src) { return INLINE_IMG.test(src); }; var isInlineBase64Image = function (src) { return INLINE_BASE64.test(src); }; var isBlobImage = function (src) { return src.substr(0, 4) === 'blob'; }; var isSVG = function (src) { return src.substr(-3).toLowerCase() === 'svg' || INLINE_SVG.test(src); }; var Vector = /** @class */ (function () { function Vector(x, y) { this.type = 0 /* VECTOR */; this.x = x; this.y = y; } Vector.prototype.add = function (deltaX, deltaY) { return new Vector(this.x + deltaX, this.y + deltaY); }; return Vector; }()); var lerp = function (a, b, t) { return new Vector(a.x + (b.x - a.x) * t, a.y + (b.y - a.y) * t); }; var BezierCurve = /** @class */ (function () { function BezierCurve(start, startControl, endControl, end) { this.type = 1 /* BEZIER_CURVE */; this.start = start; this.startControl = startControl; this.endControl = endControl; this.end = end; } BezierCurve.prototype.subdivide = function (t, firstHalf) { var ab = lerp(this.start, this.startControl, t); var bc = lerp(this.startControl, this.endControl, t); var cd = lerp(this.endControl, this.end, t); var abbc = lerp(ab, bc, t); var bccd = lerp(bc, cd, t); var dest = lerp(abbc, bccd, t); return firstHalf ? new BezierCurve(this.start, ab, abbc, dest) : new BezierCurve(dest, bccd, cd, this.end); }; BezierCurve.prototype.add = function (deltaX, deltaY) { return new BezierCurve(this.start.add(deltaX, deltaY), this.startControl.add(deltaX, deltaY), this.endControl.add(deltaX, deltaY), this.end.add(deltaX, deltaY)); }; BezierCurve.prototype.reverse = function () { return new BezierCurve(this.end, this.endControl, this.startControl, this.start); }; return BezierCurve; }()); var isBezierCurve = function (path) { return path.type === 1 /* BEZIER_CURVE */; }; var BoundCurves = /** @class */ (function () { function BoundCurves(element) { var styles = element.styles; var bounds = element.bounds; var _a = getAbsoluteValueForTuple(styles.borderTopLeftRadius, bounds.width, bounds.height), tlh = _a[0], tlv = _a[1]; var _b = getAbsoluteValueForTuple(styles.borderTopRightRadius, bounds.width, bounds.height), trh = _b[0], trv = _b[1]; var _c = getAbsoluteValueForTuple(styles.borderBottomRightRadius, bounds.width, bounds.height), brh = _c[0], brv = _c[1]; var _d = getAbsoluteValueForTuple(styles.borderBottomLeftRadius, bounds.width, bounds.height), blh = _d[0], blv = _d[1]; var factors = []; factors.push((tlh + trh) / bounds.width); factors.push((blh + brh) / bounds.width); factors.push((tlv + blv) / bounds.height); factors.push((trv + brv) / bounds.height); var maxFactor = Math.max.apply(Math, factors); if (maxFactor > 1) { tlh /= maxFactor; tlv /= maxFactor; trh /= maxFactor; trv /= maxFactor; brh /= maxFactor; brv /= maxFactor; blh /= maxFactor; blv /= maxFactor; } var topWidth = bounds.width - trh; var rightHeight = bounds.height - brv; var bottomWidth = bounds.width - brh; var leftHeight = bounds.height - blv; var borderTopWidth = styles.borderTopWidth; var borderRightWidth = styles.borderRightWidth; var borderBottomWidth = styles.borderBottomWidth; var borderLeftWidth = styles.borderLeftWidth; var paddingTop = getAbsoluteValue(styles.paddingTop, element.bounds.width); var paddingRight = getAbsoluteValue(styles.paddingRight, element.bounds.width); var paddingBottom = getAbsoluteValue(styles.paddingBottom, element.bounds.width); var paddingLeft = getAbsoluteValue(styles.paddingLeft, element.bounds.width); this.topLeftBorderDoubleOuterBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3, tlh - borderLeftWidth / 3, tlv - borderTopWidth / 3, CORNER.TOP_LEFT) : new Vector(bounds.left + borderLeftWidth / 3, bounds.top + borderTopWidth / 3); this.topRightBorderDoubleOuterBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + topWidth, bounds.top + borderTopWidth / 3, trh - borderRightWidth / 3, trv - borderTopWidth / 3, CORNER.TOP_RIGHT) : new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + borderTopWidth / 3); this.bottomRightBorderDoubleOuterBox = brh > 0 || brv > 0 ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - borderRightWidth / 3, brv - borderBottomWidth / 3, CORNER.BOTTOM_RIGHT) : new Vector(bounds.left + bounds.width - borderRightWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3); this.bottomLeftBorderDoubleOuterBox = blh > 0 || blv > 0 ? getCurvePoints(bounds.left + borderLeftWidth / 3, bounds.top + leftHeight, blh - borderLeftWidth / 3, blv - borderBottomWidth / 3, CORNER.BOTTOM_LEFT) : new Vector(bounds.left + borderLeftWidth / 3, bounds.top + bounds.height - borderBottomWidth / 3); this.topLeftBorderDoubleInnerBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3, tlh - (borderLeftWidth * 2) / 3, tlv - (borderTopWidth * 2) / 3, CORNER.TOP_LEFT) : new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3); this.topRightBorderDoubleInnerBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + topWidth, bounds.top + (borderTopWidth * 2) / 3, trh - (borderRightWidth * 2) / 3, trv - (borderTopWidth * 2) / 3, CORNER.TOP_RIGHT) : new Vector(bounds.left + bounds.width - (borderRightWidth * 2) / 3, bounds.top + (borderTopWidth * 2) / 3); this.bottomRightBorderDoubleInnerBox = brh > 0 || brv > 0 ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - (borderRightWidth * 2) / 3, brv - (borderBottomWidth * 2) / 3, CORNER.BOTTOM_RIGHT) : new Vector(bounds.left + bounds.width - (borderRightWidth * 2) / 3, bounds.top + bounds.height - (borderBottomWidth * 2) / 3); this.bottomLeftBorderDoubleInnerBox = blh > 0 || blv > 0 ? getCurvePoints(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + leftHeight, blh - (borderLeftWidth * 2) / 3, blv - (borderBottomWidth * 2) / 3, CORNER.BOTTOM_LEFT) : new Vector(bounds.left + (borderLeftWidth * 2) / 3, bounds.top + bounds.height - (borderBottomWidth * 2) / 3); this.topLeftBorderStroke = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2, tlh - borderLeftWidth / 2, tlv - borderTopWidth / 2, CORNER.TOP_LEFT) : new Vector(bounds.left + borderLeftWidth / 2, bounds.top + borderTopWidth / 2); this.topRightBorderStroke = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + topWidth, bounds.top + borderTopWidth / 2, trh - borderRightWidth / 2, trv - borderTopWidth / 2, CORNER.TOP_RIGHT) : new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + borderTopWidth / 2); this.bottomRightBorderStroke = brh > 0 || brv > 0 ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh - borderRightWidth / 2, brv - borderBottomWidth / 2, CORNER.BOTTOM_RIGHT) : new Vector(bounds.left + bounds.width - borderRightWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2); this.bottomLeftBorderStroke = blh > 0 || blv > 0 ? getCurvePoints(bounds.left + borderLeftWidth / 2, bounds.top + leftHeight, blh - borderLeftWidth / 2, blv - borderBottomWidth / 2, CORNER.BOTTOM_LEFT) : new Vector(bounds.left + borderLeftWidth / 2, bounds.top + bounds.height - borderBottomWidth / 2); this.topLeftBorderBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left, bounds.top, tlh, tlv, CORNER.TOP_LEFT) : new Vector(bounds.left, bounds.top); this.topRightBorderBox = trh > 0 || trv > 0 ? getCurvePoints(bounds.left + topWidth, bounds.top, trh, trv, CORNER.TOP_RIGHT) : new Vector(bounds.left + bounds.width, bounds.top); this.bottomRightBorderBox = brh > 0 || brv > 0 ? getCurvePoints(bounds.left + bottomWidth, bounds.top + rightHeight, brh, brv, CORNER.BOTTOM_RIGHT) : new Vector(bounds.left + bounds.width, bounds.top + bounds.height); this.bottomLeftBorderBox = blh > 0 || blv > 0 ? getCurvePoints(bounds.left, bounds.top + leftHeight, blh, blv, CORNER.BOTTOM_LEFT) : new Vector(bounds.left, bounds.top + bounds.height); this.topLeftPaddingBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + borderTopWidth, Math.max(0, tlh - borderLeftWidth), Math.max(0, tlv - borderTopWidth), CORNER.TOP_LEFT) : new Vector(bounds.left + borderLeftWidth, bounds.top + borderTopWidth); this.topRightPaddingBox = trh > 0 || trv > 0 ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width - borderRightWidth), bounds.top + borderTopWidth, topWidth > bounds.width + borderRightWidth ? 0 : Math.max(0, trh - borderRightWidth), Math.max(0, trv - borderTopWidth), CORNER.TOP_RIGHT) : new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + borderTopWidth); this.bottomRightPaddingBox = brh > 0 || brv > 0 ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - borderLeftWidth), bounds.top + Math.min(rightHeight, bounds.height - borderBottomWidth), Math.max(0, brh - borderRightWidth), Math.max(0, brv - borderBottomWidth), CORNER.BOTTOM_RIGHT) : new Vector(bounds.left + bounds.width - borderRightWidth, bounds.top + bounds.height - borderBottomWidth); this.bottomLeftPaddingBox = blh > 0 || blv > 0 ? getCurvePoints(bounds.left + borderLeftWidth, bounds.top + Math.min(leftHeight, bounds.height - borderBottomWidth), Math.max(0, blh - borderLeftWidth), Math.max(0, blv - borderBottomWidth), CORNER.BOTTOM_LEFT) : new Vector(bounds.left + borderLeftWidth, bounds.top + bounds.height - borderBottomWidth); this.topLeftContentBox = tlh > 0 || tlv > 0 ? getCurvePoints(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop, Math.max(0, tlh - (borderLeftWidth + paddingLeft)), Math.max(0, tlv - (borderTopWidth + paddingTop)), CORNER.TOP_LEFT) : new Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + borderTopWidth + paddingTop); this.topRightContentBox = trh > 0 || trv > 0 ? getCurvePoints(bounds.left + Math.min(topWidth, bounds.width + borderLeftWidth + paddingLeft), bounds.top + borderTopWidth + paddingTop, topWidth > bounds.width + borderLeftWidth + paddingLeft ? 0 : trh - borderLeftWidth + paddingLeft, trv - (borderTopWidth + paddingTop), CORNER.TOP_RIGHT) : new Vector(bounds.left + bounds.width - (borderRightWidth + paddingRight), bounds.top + borderTopWidth + paddingTop); this.bottomRightContentBox = brh > 0 || brv > 0 ? getCurvePoints(bounds.left + Math.min(bottomWidth, bounds.width - (borderLeftWidth + paddingLeft)), bounds.top + Math.min(rightHeight, bounds.height + borderTopWidth + paddingTop), Math.max(0, brh - (borderRightWidth + paddingRight)), brv - (borderBottomWidth + paddingBottom), CORNER.BOTTOM_RIGHT) : new Vector(bounds.left + bounds.width - (borderRightWidth + paddingRight), bounds.top + bounds.height - (borderBottomWidth + paddingBottom)); this.bottomLeftContentBox = blh > 0 || blv > 0 ? getCurvePoints(bounds.left + borderLeftWidth + paddingLeft, bounds.top + leftHeight, Math.max(0, blh - (borderLeftWidth + paddingLeft)), blv - (borderBottomWidth + paddingBottom), CORNER.BOTTOM_LEFT) : new Vector(bounds.left + borderLeftWidth + paddingLeft, bounds.top + bounds.height - (borderBottomWidth + paddingBottom)); } return BoundCurves; }()); var CORNER; (function (CORNER) { CORNER[CORNER["TOP_LEFT"] = 0] = "TOP_LEFT"; CORNER[CORNER["TOP_RIGHT"] = 1] = "TOP_RIGHT"; CORNER[CORNER["BOTTOM_RIGHT"] = 2] = "BOTTOM_RIGHT"; CORNER[CORNER["BOTTOM_LEFT"] = 3] = "BOTTOM_LEFT"; })(CORNER || (CORNER = {})); var getCurvePoints = function (x, y, r1, r2, position) { var kappa = 4 * ((Math.sqrt(2) - 1) / 3); var ox = r1 * kappa; // control point offset horizontal var oy = r2 * kappa; // control point offset vertical var xm = x + r1; // x-middle var ym = y + r2; // y-middle switch (position) { case CORNER.TOP_LEFT: return new BezierCurve(new Vector(x, ym), new Vector(x, ym - oy), new Vector(xm - ox, y), new Vector(xm, y)); case CORNER.TOP_RIGHT: return new BezierCurve(new Vector(x, y), new Vector(x + ox, y), new Vector(xm, ym - oy), new Vector(xm, ym)); case CORNER.BOTTOM_RIGHT: return new BezierCurve(new Vector(xm, y), new Vector(xm, y + oy), new Vector(x + ox, ym), new Vector(x, ym)); case CORNER.BOTTOM_LEFT: default: return new BezierCurve(new Vector(xm, ym), new Vector(xm - ox, ym), new Vector(x, y + oy), new Vector(x, y)); } }; var calculateBorderBoxPath = function (curves) { return [curves.topLeftBorderBox, curves.topRightBorderBox, curves.bottomRightBorderBox, curves.bottomLeftBorderBox]; }; var calculateContentBoxPath = function (curves) { return [ curves.topLeftContentBox, curves.topRightContentBox, curves.bottomRightContentBox, curves.bottomLeftContentBox ]; }; var calculatePaddingBoxPath = function (curves) { return [ curves.topLeftPaddingBox, curves.topRightPaddingBox, curves.bottomRightPaddingBox, curves.bottomLeftPaddingBox ]; }; var TransformEffect = /** @class */ (function () { function TransformEffect(offsetX, offsetY, matrix) { this.offsetX = offsetX; this.offsetY = offsetY; this.matrix = matrix; this.type = 0 /* TRANSFORM */; this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */; } return TransformEffect; }()); var ClipEffect = /** @class */ (function () { function ClipEffect(path, target) { this.path = path; this.target = target; this.type = 1 /* CLIP */; } return ClipEffect; }()); var OpacityEffect = /** @class */ (function () { function OpacityEffect(opacity) { this.opacity = opacity; this.type = 2 /* OPACITY */; this.target = 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */; } return OpacityEffect; }()); var isTransformEffect = function (effect) { return effect.type === 0 /* TRANSFORM */; }; var isClipEffect = function (effect) { return effect.type === 1 /* CLIP */; }; var isOpacityEffect = function (effect) { return effect.type === 2 /* OPACITY */; }; var equalPath = function (a, b) { if (a.length === b.length) { return a.some(function (v, i) { return v === b[i]; }); } return false; }; var transformPath = function (path, deltaX, deltaY, deltaW, deltaH) { return path.map(function (point, index) { switch (index) { case 0: return point.add(deltaX, deltaY); case 1: return point.add(deltaX + deltaW, deltaY); case 2: return point.add(deltaX + deltaW, deltaY + deltaH); case 3: return point.add(deltaX, deltaY + deltaH); } return point; }); }; var StackingContext = /** @class */ (function () { function StackingContext(container) { this.element = container; this.inlineLevel = []; this.nonInlineLevel = []; this.negativeZIndex = []; this.zeroOrAutoZIndexOrTransformedOrOpacity = []; this.positiveZIndex = []; this.nonPositionedFloats = []; this.nonPositionedInlineLevel = []; } return StackingContext; }()); var ElementPaint = /** @class */ (function () { function ElementPaint(container, parent) { this.container = container; this.parent = parent; this.effects = []; this.curves = new BoundCurves(this.container); if (this.container.styles.opacity < 1) { this.effects.push(new OpacityEffect(this.container.styles.opacity)); } if (this.container.styles.transform !== null) { var offsetX = this.container.bounds.left + this.container.styles.transformOrigin[0].number; var offsetY = this.container.bounds.top + this.container.styles.transformOrigin[1].number; var matrix = this.container.styles.transform; this.effects.push(new TransformEffect(offsetX, offsetY, matrix)); } if (this.container.styles.overflowX !== 0 /* VISIBLE */) { var borderBox = calculateBorderBoxPath(this.curves); var paddingBox = calculatePaddingBoxPath(this.curves); if (equalPath(borderBox, paddingBox)) { this.effects.push(new ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */)); } else { this.effects.push(new ClipEffect(borderBox, 2 /* BACKGROUND_BORDERS */)); this.effects.push(new ClipEffect(paddingBox, 4 /* CONTENT */)); } } } ElementPaint.prototype.getEffects = function (target) { var inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(this.container.styles.position) === -1; var parent = this.parent; var effects = this.effects.slice(0); while (parent) { var croplessEffects = parent.effects.filter(function (effect) { return !isClipEffect(effect); }); if (inFlow || parent.container.styles.position !== 0 /* STATIC */ || !parent.parent) { effects.unshift.apply(effects, croplessEffects); inFlow = [2 /* ABSOLUTE */, 3 /* FIXED */].indexOf(parent.container.styles.position) === -1; if (parent.container.styles.overflowX !== 0 /* VISIBLE */) { var borderBox = calculateBorderBoxPath(parent.curves); var paddingBox = calculatePaddingBoxPath(parent.curves); if (!equalPath(borderBox, paddingBox)) { effects.unshift(new ClipEffect(paddingBox, 2 /* BACKGROUND_BORDERS */ | 4 /* CONTENT */)); } } } else { effects.unshift.apply(effects, croplessEffects); } parent = parent.parent; } return effects.filter(function (effect) { return contains(effect.target, target); }); }; return ElementPaint; }()); var parseStackTree = function (parent, stackingContext, realStackingContext, listItems) { parent.container.elements.forEach(function (child) { var treatAsRealStackingContext = contains(child.flags, 4 /* CREATES_REAL_STACKING_CONTEXT */); var createsStackingContext = contains(child.flags, 2 /* CREATES_STACKING_CONTEXT */); var paintContainer = new ElementPaint(child, parent); if (contains(child.styles.display, 2048 /* LIST_ITEM */)) { listItems.push(paintContainer); } var listOwnerItems = contains(child.flags, 8 /* IS_LIST_OWNER */) ? [] : listItems; if (treatAsRealStackingContext || createsStackingContext) { var parentStack = treatAsRealStackingContext || child.styles.isPositioned() ? realStackingContext : stackingContext; var stack = new StackingContext(paintContainer); if (child.styles.isPositioned() || child.styles.opacity < 1 || child.styles.isTransformed()) { var order_1 = child.styles.zIndex.order; if (order_1 < 0) { var index_1 = 0; parentStack.negativeZIndex.some(function (current, i) { if (order_1 > current.element.container.styles.zIndex.order) { index_1 = i; return false; } else if (index_1 > 0) { return true; } return false; }); parentStack.negativeZIndex.splice(index_1, 0, stack); } else if (order_1 > 0) { var index_2 = 0; parentStack.positiveZIndex.some(function (current, i) { if (order_1 >= current.element.container.styles.zIndex.order) { index_2 = i + 1; return false; } else if (index_2 > 0) { return true; } return false; }); parentStack.positiveZIndex.splice(index_2, 0, stack); } else { parentStack.zeroOrAutoZIndexOrTransformedOrOpacity.push(stack); } } else { if (child.styles.isFloating()) { parentStack.nonPositionedFloats.push(stack); } else { parentStack.nonPositionedInlineLevel.push(stack); } } parseStackTree(paintContainer, stack, treatAsRealStackingContext ? stack : realStackingContext, listOwnerItems); } else { if (child.styles.isInlineLevel()) { stackingContext.inlineLevel.push(paintContainer); } else { stackingContext.nonInlineLevel.push(paintContainer); } parseStackTree(paintContainer, stackingContext, realStackingContext, listOwnerItems); } if (contains(child.flags, 8 /* IS_LIST_OWNER */)) { processListItems(child, listOwnerItems); } }); }; var processListItems = function (owner, elements) { var numbering = owner instanceof OLElementContainer ? owner.start : 1; var reversed = owner instanceof OLElementContainer ? owner.reversed : false; for (var i = 0; i < elements.length; i++) { var item = elements[i]; if (item.container instanceof LIElementContainer && typeof item.container.value === 'number' && item.container.value !== 0) { numbering = item.container.value; } item.listValue = createCounterText(numbering, item.container.styles.listStyleType, true); numbering += reversed ? -1 : 1; } }; var parseStackingContexts = function (container) { var paintContainer = new ElementPaint(container, null); var root = new StackingContext(paintContainer); var listItems = []; parseStackTree(paintContainer, root, root, listItems); processListItems(paintContainer.container, listItems); return root; }; var parsePathForBorder = function (curves, borderSide) { switch (borderSide) { case 0: return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftPaddingBox, curves.topRightBorderBox, curves.topRightPaddingBox); case 1: return createPathFromCurves(curves.topRightBorderBox, curves.topRightPaddingBox, curves.bottomRightBorderBox, curves.bottomRightPaddingBox); case 2: return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox); case 3: default: return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftPaddingBox, curves.topLeftBorderBox, curves.topLeftPaddingBox); } }; var parsePathForBorderDoubleOuter = function (curves, borderSide) { switch (borderSide) { case 0: return createPathFromCurves(curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox, curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox); case 1: return createPathFromCurves(curves.topRightBorderBox, curves.topRightBorderDoubleOuterBox, curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox); case 2: return createPathFromCurves(curves.bottomRightBorderBox, curves.bottomRightBorderDoubleOuterBox, curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox); case 3: default: return createPathFromCurves(curves.bottomLeftBorderBox, curves.bottomLeftBorderDoubleOuterBox, curves.topLeftBorderBox, curves.topLeftBorderDoubleOuterBox); } }; var parsePathForBorderDoubleInner = function (curves, borderSide) { switch (borderSide) { case 0: return createPathFromCurves(curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox, curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox); case 1: return createPathFromCurves(curves.topRightBorderDoubleInnerBox, curves.topRightPaddingBox, curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox); case 2: return createPathFromCurves(curves.bottomRightBorderDoubleInnerBox, curves.bottomRightPaddingBox, curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox); case 3: default: return createPathFromCurves(curves.bottomLeftBorderDoubleInnerBox, curves.bottomLeftPaddingBox, curves.topLeftBorderDoubleInnerBox, curves.topLeftPaddingBox); } }; var parsePathForBorderStroke = function (curves, borderSide) { switch (borderSide) { case 0: return createStrokePathFromCurves(curves.topLeftBorderStroke, curves.topRightBorderStroke); case 1: return createStrokePathFromCurves(curves.topRightBorderStroke, curves.bottomRightBorderStroke); case 2: return createStrokePathFromCurves(curves.bottomRightBorderStroke, curves.bottomLeftBorderStroke); case 3: default: return createStrokePathFromCurves(curves.bottomLeftBorderStroke, curves.topLeftBorderStroke); } }; var createStrokePathFromCurves = function (outer1, outer2) { var path = []; if (isBezierCurve(outer1)) { path.push(outer1.subdivide(0.5, false)); } else { path.push(outer1); } if (isBezierCurve(outer2)) { path.push(outer2.subdivide(0.5, true)); } else { path.push(outer2); } return path; }; var createPathFromCurves = function (outer1, inner1, outer2, inner2) { var path = []; if (isBezierCurve(outer1)) { path.push(outer1.subdivide(0.5, false)); } else { path.push(outer1); } if (isBezierCurve(outer2)) { path.push(outer2.subdivide(0.5, true)); } else { path.push(outer2); } if (isBezierCurve(inner2)) { path.push(inner2.subdivide(0.5, true).reverse()); } else { path.push(inner2); } if (isBezierCurve(inner1)) { path.push(inner1.subdivide(0.5, false).reverse()); } else { path.push(inner1); } return path; }; var paddingBox = function (element) { var bounds = element.bounds; var styles = element.styles; return bounds.add(styles.borderLeftWidth, styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth), -(styles.borderTopWidth + styles.borderBottomWidth)); }; var contentBox = function (element) { var styles = element.styles; var bounds = element.bounds; var paddingLeft = getAbsoluteValue(styles.paddingLeft, bounds.width); var paddingRight = getAbsoluteValue(styles.paddingRight, bounds.width); var paddingTop = getAbsoluteValue(styles.paddingTop, bounds.width); var paddingBottom = getAbsoluteValue(styles.paddingBottom, bounds.width); return bounds.add(paddingLeft + styles.borderLeftWidth, paddingTop + styles.borderTopWidth, -(styles.borderRightWidth + styles.borderLeftWidth + paddingLeft + paddingRight), -(styles.borderTopWidth + styles.borderBottomWidth + paddingTop + paddingBottom)); }; var calculateBackgroundPositioningArea = function (backgroundOrigin, element) { if (backgroundOrigin === 0 /* BORDER_BOX */) { return element.bounds; } if (backgroundOrigin === 2 /* CONTENT_BOX */) { return contentBox(element); } return paddingBox(element); }; var calculateBackgroundPaintingArea = function (backgroundClip, element) { if (backgroundClip === 0 /* BORDER_BOX */) { return element.bounds; } if (backgroundClip === 2 /* CONTENT_BOX */) { return contentBox(element); } return paddingBox(element); }; var calculateBackgroundRendering = function (container, index, intrinsicSize) { var backgroundPositioningArea = calculateBackgroundPositioningArea(getBackgroundValueForIndex(container.styles.backgroundOrigin, index), container); var backgroundPaintingArea = calculateBackgroundPaintingArea(getBackgroundValueForIndex(container.styles.backgroundClip, index), container); var backgroundImageSize = calculateBackgroundSize(getBackgroundValueForIndex(container.styles.backgroundSize, index), intrinsicSize, backgroundPositioningArea); var sizeWidth = backgroundImageSize[0], sizeHeight = backgroundImageSize[1]; var position = getAbsoluteValueForTuple(getBackgroundValueForIndex(container.styles.backgroundPosition, index), backgroundPositioningArea.width - sizeWidth, backgroundPositioningArea.height - sizeHeight); var path = calculateBackgroundRepeatPath(getBackgroundValueForIndex(container.styles.backgroundRepeat, index), position, backgroundImageSize, backgroundPositioningArea, backgroundPaintingArea); var offsetX = Math.round(backgroundPositioningArea.left + position[0]); var offsetY = Math.round(backgroundPositioningArea.top + position[1]); return [path, offsetX, offsetY, sizeWidth, sizeHeight]; }; var isAuto = function (token) { return isIdentToken(token) && token.value === BACKGROUND_SIZE.AUTO; }; var hasIntrinsicValue = function (value) { return typeof value === 'number'; }; var calculateBackgroundSize = function (size, _a, bounds) { var intrinsicWidth = _a[0], intrinsicHeight = _a[1], intrinsicProportion = _a[2]; var first = size[0], second = size[1]; if (!first) { return [0, 0]; } if (isLengthPercentage(first) && second && isLengthPercentage(second)) { return [getAbsoluteValue(first, bounds.width), getAbsoluteValue(second, bounds.height)]; } var hasIntrinsicProportion = hasIntrinsicValue(intrinsicProportion); if (isIdentToken(first) && (first.value === BACKGROUND_SIZE.CONTAIN || first.value === BACKGROUND_SIZE.COVER)) { if (hasIntrinsicValue(intrinsicProportion)) { var targetRatio = bounds.width / bounds.height; return targetRatio < intrinsicProportion !== (first.value === BACKGROUND_SIZE.COVER) ? [bounds.width, bounds.width / intrinsicProportion] : [bounds.height * intrinsicProportion, bounds.height]; } return [bounds.width, bounds.height]; } var hasIntrinsicWidth = hasIntrinsicValue(intrinsicWidth); var hasIntrinsicHeight = hasIntrinsicValue(intrinsicHeight); var hasIntrinsicDimensions = hasIntrinsicWidth || hasIntrinsicHeight; // If the background-size is auto or auto auto: if (isAuto(first) && (!second || isAuto(second))) { // If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size. if (hasIntrinsicWidth && hasIntrinsicHeight) { return [intrinsicWidth, intrinsicHeight]; } // If the image has no intrinsic dimensions and has no intrinsic proportions, // it's rendered at the size of the background positioning area. if (!hasIntrinsicProportion && !hasIntrinsicDimensions) { return [bounds.width, bounds.height]; } // TODO If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead. // If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. // The other dimension is computed using the specified dimension and the intrinsic proportions. if (hasIntrinsicDimensions && hasIntrinsicProportion) { var width_1 = hasIntrinsicWidth ? intrinsicWidth : intrinsicHeight * intrinsicProportion; var height_1 = hasIntrinsicHeight ? intrinsicHeight : intrinsicWidth / intrinsicProportion; return [width_1, height_1]; } // If the image has only one intrinsic dimension but has no intrinsic proportions, // it's rendered using the specified dimension and the other dimension of the background positioning area. var width_2 = hasIntrinsicWidth ? intrinsicWidth : bounds.width; var height_2 = hasIntrinsicHeight ? intrinsicHeight : bounds.height; return [width_2, height_2]; } // If the image has intrinsic proportions, it's stretched to the specified dimension. // The unspecified dimension is computed using the specified dimension and the intrinsic proportions. if (hasIntrinsicProportion) { var width_3 = 0; var height_3 = 0; if (isLengthPercentage(first)) { width_3 = getAbsoluteValue(first, bounds.width); } else if (isLengthPercentage(second)) { height_3 = getAbsoluteValue(second, bounds.height); } if (isAuto(first)) { width_3 = height_3 * intrinsicProportion; } else if (!second || isAuto(second)) { height_3 = width_3 / intrinsicProportion; } return [width_3, height_3]; } // If the image has no intrinsic proportions, it's stretched to the specified dimension. // The unspecified dimension is computed using the image's corresponding intrinsic dimension, // if there is one. If there is no such intrinsic dimension, // it becomes the corresponding dimension of the background positioning area. var width = null; var height = null; if (isLengthPercentage(first)) { width = getAbsoluteValue(first, bounds.width); } else if (second && isLengthPercentage(second)) { height = getAbsoluteValue(second, bounds.height); } if (width !== null && (!second || isAuto(second))) { height = hasIntrinsicWidth && hasIntrinsicHeight ? (width / intrinsicWidth) * intrinsicHeight : bounds.height; } if (height !== null && isAuto(first)) { width = hasIntrinsicWidth && hasIntrinsicHeight ? (height / intrinsicHeight) * intrinsicWidth : bounds.width; } if (width !== null && height !== null) { return [width, height]; } throw new Error("Unable to calculate background-size for element"); }; var getBackgroundValueForIndex = function (values, index) { var value = values[index]; if (typeof value === 'undefined') { return values[0]; } return value; }; var calculateBackgroundRepeatPath = function (repeat, _a, _b, backgroundPositioningArea, backgroundPaintingArea) { var x = _a[0], y = _a[1]; var width = _b[0], height = _b[1]; switch (repeat) { case 2 /* REPEAT_X */: return [ new Vector(Math.round(backgroundPositioningArea.left), Math.round(backgroundPositioningArea.top + y)), new Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(backgroundPositioningArea.top + y)), new Vector(Math.round(backgroundPositioningArea.left + backgroundPositioningArea.width), Math.round(height + backgroundPositioningArea.top + y)), new Vector(Math.round(backgroundPositioningArea.left), Math.round(height + backgroundPositioningArea.top + y)) ]; case 3 /* REPEAT_Y */: return [ new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top)), new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top)), new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)), new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.height + backgroundPositioningArea.top)) ]; case 1 /* NO_REPEAT */: return [ new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y)), new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y)), new Vector(Math.round(backgroundPositioningArea.left + x + width), Math.round(backgroundPositioningArea.top + y + height)), new Vector(Math.round(backgroundPositioningArea.left + x), Math.round(backgroundPositioningArea.top + y + height)) ]; default: return [ new Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.top)), new Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.top)), new Vector(Math.round(backgroundPaintingArea.left + backgroundPaintingArea.width), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)), new Vector(Math.round(backgroundPaintingArea.left), Math.round(backgroundPaintingArea.height + backgroundPaintingArea.top)) ]; } }; var SMALL_IMAGE = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'; var SAMPLE_TEXT = 'Hidden Text'; var FontMetrics = /** @class */ (function () { function FontMetrics(document) { this._data = {}; this._document = document; } FontMetrics.prototype.parseMetrics = function (fontFamily, fontSize) { var container = this._document.createElement('div'); var img = this._document.createElement('img'); var span = this._document.createElement('span'); var body = this._document.body; container.style.visibility = 'hidden'; container.style.fontFamily = fontFamily; container.style.fontSize = fontSize; container.style.margin = '0'; container.style.padding = '0'; container.style.whiteSpace = 'nowrap'; body.appendChild(container); img.src = SMALL_IMAGE; img.width = 1; img.height = 1; img.style.margin = '0'; img.style.padding = '0'; img.style.verticalAlign = 'baseline'; span.style.fontFamily = fontFamily; span.style.fontSize = fontSize; span.style.margin = '0'; span.style.padding = '0'; span.appendChild(this._document.createTextNode(SAMPLE_TEXT)); container.appendChild(span); container.appendChild(img); var baseline = img.offsetTop - span.offsetTop + 2; container.removeChild(span); container.appendChild(this._document.createTextNode(SAMPLE_TEXT)); container.style.lineHeight = 'normal'; img.style.verticalAlign = 'super'; var middle = img.offsetTop - container.offsetTop + 2; body.removeChild(container); return { baseline: baseline, middle: middle }; }; FontMetrics.prototype.getMetrics = function (fontFamily, fontSize) { var key = fontFamily + " " + fontSize; if (typeof this._data[key] === 'undefined') { this._data[key] = this.parseMetrics(fontFamily, fontSize); } return this._data[key]; }; return FontMetrics; }()); var Renderer = /** @class */ (function () { function Renderer(context, options) { this.context = context; this.options = options; } return Renderer; }()); var MASK_OFFSET = 10000; var CanvasRenderer = /** @class */ (function (_super) { __extends(CanvasRenderer, _super); function CanvasRenderer(context, options) { var _this = _super.call(this, context, options) || this; _this._activeEffects = []; _this.canvas = options.canvas ? options.canvas : document.createElement('canvas'); _this.ctx = _this.canvas.getContext('2d'); if (!options.canvas) { _this.canvas.width = Math.floor(options.width * options.scale); _this.canvas.height = Math.floor(options.height * options.scale); _this.canvas.style.width = options.width + "px"; _this.canvas.style.height = options.height + "px"; } _this.fontMetrics = new FontMetrics(document); _this.ctx.scale(_this.options.scale, _this.options.scale); _this.ctx.translate(-options.x, -options.y); _this.ctx.textBaseline = 'bottom'; _this._activeEffects = []; _this.context.logger.debug("Canvas renderer initialized (" + options.width + "x" + options.height + ") with scale " + options.scale); return _this; } CanvasRenderer.prototype.applyEffects = function (effects) { var _this = this; while (this._activeEffects.length) { this.popEffect(); } effects.forEach(function (effect) { return _this.applyEffect(effect); }); }; CanvasRenderer.prototype.applyEffect = function (effect) { this.ctx.save(); if (isOpacityEffect(effect)) { this.ctx.globalAlpha = effect.opacity; } if (isTransformEffect(effect)) { this.ctx.translate(effect.offsetX, effect.offsetY); this.ctx.transform(effect.matrix[0], effect.matrix[1], effect.matrix[2], effect.matrix[3], effect.matrix[4], effect.matrix[5]); this.ctx.translate(-effect.offsetX, -effect.offsetY); } if (isClipEffect(effect)) { this.path(effect.path); this.ctx.clip(); } this._activeEffects.push(effect); }; CanvasRenderer.prototype.popEffect = function () { this._activeEffects.pop(); this.ctx.restore(); }; CanvasRenderer.prototype.renderStack = function (stack) { return __awaiter(this, void 0, void 0, function () { var styles; return __generator(this, function (_a) { switch (_a.label) { case 0: styles = stack.element.container.styles; if (!styles.isVisible()) return [3 /*break*/, 2]; return [4 /*yield*/, this.renderStackContent(stack)]; case 1: _a.sent(); _a.label = 2; case 2: return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.renderNode = function (paint) { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { switch (_a.label) { case 0: if (contains(paint.container.flags, 16 /* DEBUG_RENDER */)) { debugger; } if (!paint.container.styles.isVisible()) return [3 /*break*/, 3]; return [4 /*yield*/, this.renderNodeBackgroundAndBorders(paint)]; case 1: _a.sent(); return [4 /*yield*/, this.renderNodeContent(paint)]; case 2: _a.sent(); _a.label = 3; case 3: return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.renderTextWithLetterSpacing = function (text, letterSpacing, baseline) { var _this = this; if (letterSpacing === 0) { this.ctx.fillText(text.text, text.bounds.left, text.bounds.top + baseline); } else { var letters = segmentGraphemes(text.text); letters.reduce(function (left, letter) { _this.ctx.fillText(letter, left, text.bounds.top + baseline); return left + _this.ctx.measureText(letter).width; }, text.bounds.left); } }; CanvasRenderer.prototype.createFontStyle = function (styles) { var fontVariant = styles.fontVariant .filter(function (variant) { return variant === 'normal' || variant === 'small-caps'; }) .join(''); var fontFamily = fixIOSSystemFonts(styles.fontFamily).join(', '); var fontSize = isDimensionToken(styles.fontSize) ? "" + styles.fontSize.number + styles.fontSize.unit : styles.fontSize.number + "px"; return [ [styles.fontStyle, fontVariant, styles.fontWeight, fontSize, fontFamily].join(' '), fontFamily, fontSize ]; }; CanvasRenderer.prototype.renderTextNode = function (text, styles) { return __awaiter(this, void 0, void 0, function () { var _a, font, fontFamily, fontSize, _b, baseline, middle, paintOrder; var _this = this; return __generator(this, function (_c) { _a = this.createFontStyle(styles), font = _a[0], fontFamily = _a[1], fontSize = _a[2]; this.ctx.font = font; this.ctx.direction = styles.direction === 1 /* RTL */ ? 'rtl' : 'ltr'; this.ctx.textAlign = 'left'; this.ctx.textBaseline = 'alphabetic'; _b = this.fontMetrics.getMetrics(fontFamily, fontSize), baseline = _b.baseline, middle = _b.middle; paintOrder = styles.paintOrder; text.textBounds.forEach(function (text) { paintOrder.forEach(function (paintOrderLayer) { switch (paintOrderLayer) { case 0 /* FILL */: _this.ctx.fillStyle = asString(styles.color); _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline); var textShadows = styles.textShadow; if (textShadows.length && text.text.trim().length) { textShadows .slice(0) .reverse() .forEach(function (textShadow) { _this.ctx.shadowColor = asString(textShadow.color); _this.ctx.shadowOffsetX = textShadow.offsetX.number * _this.options.scale; _this.ctx.shadowOffsetY = textShadow.offsetY.number * _this.options.scale; _this.ctx.shadowBlur = textShadow.blur.number; _this.renderTextWithLetterSpacing(text, styles.letterSpacing, baseline); }); _this.ctx.shadowColor = ''; _this.ctx.shadowOffsetX = 0; _this.ctx.shadowOffsetY = 0; _this.ctx.shadowBlur = 0; } if (styles.textDecorationLine.length) { _this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color); styles.textDecorationLine.forEach(function (textDecorationLine) { switch (textDecorationLine) { case 1 /* UNDERLINE */: // Draws a line at the baseline of the font // TODO As some browsers display the line as more than 1px if the font-size is big, // need to take that into account both in position and size _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top + baseline), text.bounds.width, 1); break; case 2 /* OVERLINE */: _this.ctx.fillRect(text.bounds.left, Math.round(text.bounds.top), text.bounds.width, 1); break; case 3 /* LINE_THROUGH */: // TODO try and find exact position for line-through _this.ctx.fillRect(text.bounds.left, Math.ceil(text.bounds.top + middle), text.bounds.width, 1); break; } }); } break; case 1 /* STROKE */: if (styles.webkitTextStrokeWidth && text.text.trim().length) { _this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor); _this.ctx.lineWidth = styles.webkitTextStrokeWidth; // eslint-disable-next-line @typescript-eslint/no-explicit-any _this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round'; _this.ctx.strokeText(text.text, text.bounds.left, text.bounds.top + baseline); } _this.ctx.strokeStyle = ''; _this.ctx.lineWidth = 0; _this.ctx.lineJoin = 'miter'; break; } }); }); return [2 /*return*/]; }); }); }; CanvasRenderer.prototype.renderReplacedElement = function (container, curves, image) { if (image && container.intrinsicWidth > 0 && container.intrinsicHeight > 0) { var box = contentBox(container); var path = calculatePaddingBoxPath(curves); this.path(path); this.ctx.save(); this.ctx.clip(); this.ctx.drawImage(image, 0, 0, container.intrinsicWidth, container.intrinsicHeight, box.left, box.top, box.width, box.height); this.ctx.restore(); } }; CanvasRenderer.prototype.renderNodeContent = function (paint) { return __awaiter(this, void 0, void 0, function () { var container, curves, styles, _i, _a, child, image, image, iframeRenderer, canvas, size, _b, fontFamily, fontSize, baseline, bounds, x, textBounds, img, image, url, fontFamily, bounds; return __generator(this, function (_c) { switch (_c.label) { case 0: this.applyEffects(paint.getEffects(4 /* CONTENT */)); container = paint.container; curves = paint.curves; styles = container.styles; _i = 0, _a = container.textNodes; _c.label = 1; case 1: if (!(_i < _a.length)) return [3 /*break*/, 4]; child = _a[_i]; return [4 /*yield*/, this.renderTextNode(child, styles)]; case 2: _c.sent(); _c.label = 3; case 3: _i++; return [3 /*break*/, 1]; case 4: if (!(container instanceof ImageElementContainer)) return [3 /*break*/, 8]; _c.label = 5; case 5: _c.trys.push([5, 7, , 8]); return [4 /*yield*/, this.context.cache.match(container.src)]; case 6: image = _c.sent(); this.renderReplacedElement(container, curves, image); return [3 /*break*/, 8]; case 7: _c.sent(); this.context.logger.error("Error loading image " + container.src); return [3 /*break*/, 8]; case 8: if (container instanceof CanvasElementContainer) { this.renderReplacedElement(container, curves, container.canvas); } if (!(container instanceof SVGElementContainer)) return [3 /*break*/, 12]; _c.label = 9; case 9: _c.trys.push([9, 11, , 12]); return [4 /*yield*/, this.context.cache.match(container.svg)]; case 10: image = _c.sent(); this.renderReplacedElement(container, curves, image); return [3 /*break*/, 12]; case 11: _c.sent(); this.context.logger.error("Error loading svg " + container.svg.substring(0, 255)); return [3 /*break*/, 12]; case 12: if (!(container instanceof IFrameElementContainer && container.tree)) return [3 /*break*/, 14]; iframeRenderer = new CanvasRenderer(this.context, { scale: this.options.scale, backgroundColor: container.backgroundColor, x: 0, y: 0, width: container.width, height: container.height }); return [4 /*yield*/, iframeRenderer.render(container.tree)]; case 13: canvas = _c.sent(); if (container.width && container.height) { this.ctx.drawImage(canvas, 0, 0, container.width, container.height, container.bounds.left, container.bounds.top, container.bounds.width, container.bounds.height); } _c.label = 14; case 14: if (container instanceof InputElementContainer) { size = Math.min(container.bounds.width, container.bounds.height); if (container.type === CHECKBOX) { if (container.checked) { this.ctx.save(); this.path([ new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79), new Vector(container.bounds.left + size * 0.16, container.bounds.top + size * 0.5549), new Vector(container.bounds.left + size * 0.27347, container.bounds.top + size * 0.44071), new Vector(container.bounds.left + size * 0.39694, container.bounds.top + size * 0.5649), new Vector(container.bounds.left + size * 0.72983, container.bounds.top + size * 0.23), new Vector(container.bounds.left + size * 0.84, container.bounds.top + size * 0.34085), new Vector(container.bounds.left + size * 0.39363, container.bounds.top + size * 0.79) ]); this.ctx.fillStyle = asString(INPUT_COLOR); this.ctx.fill(); this.ctx.restore(); } } else if (container.type === RADIO) { if (container.checked) { this.ctx.save(); this.ctx.beginPath(); this.ctx.arc(container.bounds.left + size / 2, container.bounds.top + size / 2, size / 4, 0, Math.PI * 2, true); this.ctx.fillStyle = asString(INPUT_COLOR); this.ctx.fill(); this.ctx.restore(); } } } if (isTextInputElement(container) && container.value.length) { _b = this.createFontStyle(styles), fontFamily = _b[0], fontSize = _b[1]; baseline = this.fontMetrics.getMetrics(fontFamily, fontSize).baseline; this.ctx.font = fontFamily; this.ctx.fillStyle = asString(styles.color); this.ctx.textBaseline = 'alphabetic'; this.ctx.textAlign = canvasTextAlign(container.styles.textAlign); bounds = contentBox(container); x = 0; switch (container.styles.textAlign) { case 1 /* CENTER */: x += bounds.width / 2; break; case 2 /* RIGHT */: x += bounds.width; break; } textBounds = bounds.add(x, 0, 0, -bounds.height / 2 + 1); this.ctx.save(); this.path([ new Vector(bounds.left, bounds.top), new Vector(bounds.left + bounds.width, bounds.top), new Vector(bounds.left + bounds.width, bounds.top + bounds.height), new Vector(bounds.left, bounds.top + bounds.height) ]); this.ctx.clip(); this.renderTextWithLetterSpacing(new TextBounds(container.value, textBounds), styles.letterSpacing, baseline); this.ctx.restore(); this.ctx.textBaseline = 'alphabetic'; this.ctx.textAlign = 'left'; } if (!contains(container.styles.display, 2048 /* LIST_ITEM */)) return [3 /*break*/, 20]; if (!(container.styles.listStyleImage !== null)) return [3 /*break*/, 19]; img = container.styles.listStyleImage; if (!(img.type === 0 /* URL */)) return [3 /*break*/, 18]; image = void 0; url = img.url; _c.label = 15; case 15: _c.trys.push([15, 17, , 18]); return [4 /*yield*/, this.context.cache.match(url)]; case 16: image = _c.sent(); this.ctx.drawImage(image, container.bounds.left - (image.width + 10), container.bounds.top); return [3 /*break*/, 18]; case 17: _c.sent(); this.context.logger.error("Error loading list-style-image " + url); return [3 /*break*/, 18]; case 18: return [3 /*break*/, 20]; case 19: if (paint.listValue && container.styles.listStyleType !== -1 /* NONE */) { fontFamily = this.createFontStyle(styles)[0]; this.ctx.font = fontFamily; this.ctx.fillStyle = asString(styles.color); this.ctx.textBaseline = 'middle'; this.ctx.textAlign = 'right'; bounds = new Bounds(container.bounds.left, container.bounds.top + getAbsoluteValue(container.styles.paddingTop, container.bounds.width), container.bounds.width, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 1); this.renderTextWithLetterSpacing(new TextBounds(paint.listValue, bounds), styles.letterSpacing, computeLineHeight(styles.lineHeight, styles.fontSize.number) / 2 + 2); this.ctx.textBaseline = 'bottom'; this.ctx.textAlign = 'left'; } _c.label = 20; case 20: return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.renderStackContent = function (stack) { return __awaiter(this, void 0, void 0, function () { var _i, _a, child, _b, _c, child, _d, _e, child, _f, _g, child, _h, _j, child, _k, _l, child, _m, _o, child; return __generator(this, function (_p) { switch (_p.label) { case 0: if (contains(stack.element.container.flags, 16 /* DEBUG_RENDER */)) { debugger; } // https://www.w3.org/TR/css-position-3/#painting-order // 1. the background and borders of the element forming the stacking context. return [4 /*yield*/, this.renderNodeBackgroundAndBorders(stack.element)]; case 1: // https://www.w3.org/TR/css-position-3/#painting-order // 1. the background and borders of the element forming the stacking context. _p.sent(); _i = 0, _a = stack.negativeZIndex; _p.label = 2; case 2: if (!(_i < _a.length)) return [3 /*break*/, 5]; child = _a[_i]; return [4 /*yield*/, this.renderStack(child)]; case 3: _p.sent(); _p.label = 4; case 4: _i++; return [3 /*break*/, 2]; case 5: // 3. For all its in-flow, non-positioned, block-level descendants in tree order: return [4 /*yield*/, this.renderNodeContent(stack.element)]; case 6: // 3. For all its in-flow, non-positioned, block-level descendants in tree order: _p.sent(); _b = 0, _c = stack.nonInlineLevel; _p.label = 7; case 7: if (!(_b < _c.length)) return [3 /*break*/, 10]; child = _c[_b]; return [4 /*yield*/, this.renderNode(child)]; case 8: _p.sent(); _p.label = 9; case 9: _b++; return [3 /*break*/, 7]; case 10: _d = 0, _e = stack.nonPositionedFloats; _p.label = 11; case 11: if (!(_d < _e.length)) return [3 /*break*/, 14]; child = _e[_d]; return [4 /*yield*/, this.renderStack(child)]; case 12: _p.sent(); _p.label = 13; case 13: _d++; return [3 /*break*/, 11]; case 14: _f = 0, _g = stack.nonPositionedInlineLevel; _p.label = 15; case 15: if (!(_f < _g.length)) return [3 /*break*/, 18]; child = _g[_f]; return [4 /*yield*/, this.renderStack(child)]; case 16: _p.sent(); _p.label = 17; case 17: _f++; return [3 /*break*/, 15]; case 18: _h = 0, _j = stack.inlineLevel; _p.label = 19; case 19: if (!(_h < _j.length)) return [3 /*break*/, 22]; child = _j[_h]; return [4 /*yield*/, this.renderNode(child)]; case 20: _p.sent(); _p.label = 21; case 21: _h++; return [3 /*break*/, 19]; case 22: _k = 0, _l = stack.zeroOrAutoZIndexOrTransformedOrOpacity; _p.label = 23; case 23: if (!(_k < _l.length)) return [3 /*break*/, 26]; child = _l[_k]; return [4 /*yield*/, this.renderStack(child)]; case 24: _p.sent(); _p.label = 25; case 25: _k++; return [3 /*break*/, 23]; case 26: _m = 0, _o = stack.positiveZIndex; _p.label = 27; case 27: if (!(_m < _o.length)) return [3 /*break*/, 30]; child = _o[_m]; return [4 /*yield*/, this.renderStack(child)]; case 28: _p.sent(); _p.label = 29; case 29: _m++; return [3 /*break*/, 27]; case 30: return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.mask = function (paths) { this.ctx.beginPath(); this.ctx.moveTo(0, 0); this.ctx.lineTo(this.canvas.width, 0); this.ctx.lineTo(this.canvas.width, this.canvas.height); this.ctx.lineTo(0, this.canvas.height); this.ctx.lineTo(0, 0); this.formatPath(paths.slice(0).reverse()); this.ctx.closePath(); }; CanvasRenderer.prototype.path = function (paths) { this.ctx.beginPath(); this.formatPath(paths); this.ctx.closePath(); }; CanvasRenderer.prototype.formatPath = function (paths) { var _this = this; paths.forEach(function (point, index) { var start = isBezierCurve(point) ? point.start : point; if (index === 0) { _this.ctx.moveTo(start.x, start.y); } else { _this.ctx.lineTo(start.x, start.y); } if (isBezierCurve(point)) { _this.ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y); } }); }; CanvasRenderer.prototype.renderRepeat = function (path, pattern, offsetX, offsetY) { this.path(path); this.ctx.fillStyle = pattern; this.ctx.translate(offsetX, offsetY); this.ctx.fill(); this.ctx.translate(-offsetX, -offsetY); }; CanvasRenderer.prototype.resizeImage = function (image, width, height) { var _a; if (image.width === width && image.height === height) { return image; } var ownerDocument = (_a = this.canvas.ownerDocument) !== null && _a !== void 0 ? _a : document; var canvas = ownerDocument.createElement('canvas'); canvas.width = Math.max(1, width); canvas.height = Math.max(1, height); var ctx = canvas.getContext('2d'); ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height); return canvas; }; CanvasRenderer.prototype.renderBackgroundImage = function (container) { return __awaiter(this, void 0, void 0, function () { var index, _loop_1, this_1, _i, _a, backgroundImage; return __generator(this, function (_b) { switch (_b.label) { case 0: index = container.styles.backgroundImage.length - 1; _loop_1 = function (backgroundImage) { var image, url, _c, path, x, y, width, height, pattern, _d, path, x, y, width, height, _e, lineLength, x0, x1, y0, y1, canvas, ctx, gradient_1, pattern, _f, path, left, top_1, width, height, position, x, y, _g, rx, ry, radialGradient_1, midX, midY, f, invF; return __generator(this, function (_h) { switch (_h.label) { case 0: if (!(backgroundImage.type === 0 /* URL */)) return [3 /*break*/, 5]; image = void 0; url = backgroundImage.url; _h.label = 1; case 1: _h.trys.push([1, 3, , 4]); return [4 /*yield*/, this_1.context.cache.match(url)]; case 2: image = _h.sent(); return [3 /*break*/, 4]; case 3: _h.sent(); this_1.context.logger.error("Error loading background-image " + url); return [3 /*break*/, 4]; case 4: if (image) { _c = calculateBackgroundRendering(container, index, [ image.width, image.height, image.width / image.height ]), path = _c[0], x = _c[1], y = _c[2], width = _c[3], height = _c[4]; pattern = this_1.ctx.createPattern(this_1.resizeImage(image, width, height), 'repeat'); this_1.renderRepeat(path, pattern, x, y); } return [3 /*break*/, 6]; case 5: if (isLinearGradient(backgroundImage)) { _d = calculateBackgroundRendering(container, index, [null, null, null]), path = _d[0], x = _d[1], y = _d[2], width = _d[3], height = _d[4]; _e = calculateGradientDirection(backgroundImage.angle, width, height), lineLength = _e[0], x0 = _e[1], x1 = _e[2], y0 = _e[3], y1 = _e[4]; canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; ctx = canvas.getContext('2d'); gradient_1 = ctx.createLinearGradient(x0, y0, x1, y1); processColorStops(backgroundImage.stops, lineLength).forEach(function (colorStop) { return gradient_1.addColorStop(colorStop.stop, asString(colorStop.color)); }); ctx.fillStyle = gradient_1; ctx.fillRect(0, 0, width, height); if (width > 0 && height > 0) { pattern = this_1.ctx.createPattern(canvas, 'repeat'); this_1.renderRepeat(path, pattern, x, y); } } else if (isRadialGradient(backgroundImage)) { _f = calculateBackgroundRendering(container, index, [ null, null, null ]), path = _f[0], left = _f[1], top_1 = _f[2], width = _f[3], height = _f[4]; position = backgroundImage.position.length === 0 ? [FIFTY_PERCENT] : backgroundImage.position; x = getAbsoluteValue(position[0], width); y = getAbsoluteValue(position[position.length - 1], height); _g = calculateRadius(backgroundImage, x, y, width, height), rx = _g[0], ry = _g[1]; if (rx > 0 && ry > 0) { radialGradient_1 = this_1.ctx.createRadialGradient(left + x, top_1 + y, 0, left + x, top_1 + y, rx); processColorStops(backgroundImage.stops, rx * 2).forEach(function (colorStop) { return radialGradient_1.addColorStop(colorStop.stop, asString(colorStop.color)); }); this_1.path(path); this_1.ctx.fillStyle = radialGradient_1; if (rx !== ry) { midX = container.bounds.left + 0.5 * container.bounds.width; midY = container.bounds.top + 0.5 * container.bounds.height; f = ry / rx; invF = 1 / f; this_1.ctx.save(); this_1.ctx.translate(midX, midY); this_1.ctx.transform(1, 0, 0, f, 0, 0); this_1.ctx.translate(-midX, -midY); this_1.ctx.fillRect(left, invF * (top_1 - midY) + midY, width, height * invF); this_1.ctx.restore(); } else { this_1.ctx.fill(); } } } _h.label = 6; case 6: index--; return [2 /*return*/]; } }); }; this_1 = this; _i = 0, _a = container.styles.backgroundImage.slice(0).reverse(); _b.label = 1; case 1: if (!(_i < _a.length)) return [3 /*break*/, 4]; backgroundImage = _a[_i]; return [5 /*yield**/, _loop_1(backgroundImage)]; case 2: _b.sent(); _b.label = 3; case 3: _i++; return [3 /*break*/, 1]; case 4: return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.renderSolidBorder = function (color, side, curvePoints) { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { this.path(parsePathForBorder(curvePoints, side)); this.ctx.fillStyle = asString(color); this.ctx.fill(); return [2 /*return*/]; }); }); }; CanvasRenderer.prototype.renderDoubleBorder = function (color, width, side, curvePoints) { return __awaiter(this, void 0, void 0, function () { var outerPaths, innerPaths; return __generator(this, function (_a) { switch (_a.label) { case 0: if (!(width < 3)) return [3 /*break*/, 2]; return [4 /*yield*/, this.renderSolidBorder(color, side, curvePoints)]; case 1: _a.sent(); return [2 /*return*/]; case 2: outerPaths = parsePathForBorderDoubleOuter(curvePoints, side); this.path(outerPaths); this.ctx.fillStyle = asString(color); this.ctx.fill(); innerPaths = parsePathForBorderDoubleInner(curvePoints, side); this.path(innerPaths); this.ctx.fill(); return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.renderNodeBackgroundAndBorders = function (paint) { return __awaiter(this, void 0, void 0, function () { var styles, hasBackground, borders, backgroundPaintingArea, side, _i, borders_1, border; var _this = this; return __generator(this, function (_a) { switch (_a.label) { case 0: this.applyEffects(paint.getEffects(2 /* BACKGROUND_BORDERS */)); styles = paint.container.styles; hasBackground = !isTransparent(styles.backgroundColor) || styles.backgroundImage.length; borders = [ { style: styles.borderTopStyle, color: styles.borderTopColor, width: styles.borderTopWidth }, { style: styles.borderRightStyle, color: styles.borderRightColor, width: styles.borderRightWidth }, { style: styles.borderBottomStyle, color: styles.borderBottomColor, width: styles.borderBottomWidth }, { style: styles.borderLeftStyle, color: styles.borderLeftColor, width: styles.borderLeftWidth } ]; backgroundPaintingArea = calculateBackgroundCurvedPaintingArea(getBackgroundValueForIndex(styles.backgroundClip, 0), paint.curves); if (!(hasBackground || styles.boxShadow.length)) return [3 /*break*/, 2]; this.ctx.save(); this.path(backgroundPaintingArea); this.ctx.clip(); if (!isTransparent(styles.backgroundColor)) { this.ctx.fillStyle = asString(styles.backgroundColor); this.ctx.fill(); } return [4 /*yield*/, this.renderBackgroundImage(paint.container)]; case 1: _a.sent(); this.ctx.restore(); styles.boxShadow .slice(0) .reverse() .forEach(function (shadow) { _this.ctx.save(); var borderBoxArea = calculateBorderBoxPath(paint.curves); var maskOffset = shadow.inset ? 0 : MASK_OFFSET; var shadowPaintingArea = transformPath(borderBoxArea, -maskOffset + (shadow.inset ? 1 : -1) * shadow.spread.number, (shadow.inset ? 1 : -1) * shadow.spread.number, shadow.spread.number * (shadow.inset ? -2 : 2), shadow.spread.number * (shadow.inset ? -2 : 2)); if (shadow.inset) { _this.path(borderBoxArea); _this.ctx.clip(); _this.mask(shadowPaintingArea); } else { _this.mask(borderBoxArea); _this.ctx.clip(); _this.path(shadowPaintingArea); } _this.ctx.shadowOffsetX = shadow.offsetX.number + maskOffset; _this.ctx.shadowOffsetY = shadow.offsetY.number; _this.ctx.shadowColor = asString(shadow.color); _this.ctx.shadowBlur = shadow.blur.number; _this.ctx.fillStyle = shadow.inset ? asString(shadow.color) : 'rgba(0,0,0,1)'; _this.ctx.fill(); _this.ctx.restore(); }); _a.label = 2; case 2: side = 0; _i = 0, borders_1 = borders; _a.label = 3; case 3: if (!(_i < borders_1.length)) return [3 /*break*/, 13]; border = borders_1[_i]; if (!(border.style !== 0 /* NONE */ && !isTransparent(border.color) && border.width > 0)) return [3 /*break*/, 11]; if (!(border.style === 2 /* DASHED */)) return [3 /*break*/, 5]; return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 2 /* DASHED */)]; case 4: _a.sent(); return [3 /*break*/, 11]; case 5: if (!(border.style === 3 /* DOTTED */)) return [3 /*break*/, 7]; return [4 /*yield*/, this.renderDashedDottedBorder(border.color, border.width, side, paint.curves, 3 /* DOTTED */)]; case 6: _a.sent(); return [3 /*break*/, 11]; case 7: if (!(border.style === 4 /* DOUBLE */)) return [3 /*break*/, 9]; return [4 /*yield*/, this.renderDoubleBorder(border.color, border.width, side, paint.curves)]; case 8: _a.sent(); return [3 /*break*/, 11]; case 9: return [4 /*yield*/, this.renderSolidBorder(border.color, side, paint.curves)]; case 10: _a.sent(); _a.label = 11; case 11: side++; _a.label = 12; case 12: _i++; return [3 /*break*/, 3]; case 13: return [2 /*return*/]; } }); }); }; CanvasRenderer.prototype.renderDashedDottedBorder = function (color, width, side, curvePoints, style) { return __awaiter(this, void 0, void 0, function () { var strokePaths, boxPaths, startX, startY, endX, endY, length, dashLength, spaceLength, useLineDash, multiplier, numberOfDashes, minSpace, maxSpace, path1, path2, path1, path2; return __generator(this, function (_a) { this.ctx.save(); strokePaths = parsePathForBorderStroke(curvePoints, side); boxPaths = parsePathForBorder(curvePoints, side); if (style === 2 /* DASHED */) { this.path(boxPaths); this.ctx.clip(); } if (isBezierCurve(boxPaths[0])) { startX = boxPaths[0].start.x; startY = boxPaths[0].start.y; } else { startX = boxPaths[0].x; startY = boxPaths[0].y; } if (isBezierCurve(boxPaths[1])) { endX = boxPaths[1].end.x; endY = boxPaths[1].end.y; } else { endX = boxPaths[1].x; endY = boxPaths[1].y; } if (side === 0 || side === 2) { length = Math.abs(startX - endX); } else { length = Math.abs(startY - endY); } this.ctx.beginPath(); if (style === 3 /* DOTTED */) { this.formatPath(strokePaths); } else { this.formatPath(boxPaths.slice(0, 2)); } dashLength = width < 3 ? width * 3 : width * 2; spaceLength = width < 3 ? width * 2 : width; if (style === 3 /* DOTTED */) { dashLength = width; spaceLength = width; } useLineDash = true; if (length <= dashLength * 2) { useLineDash = false; } else if (length <= dashLength * 2 + spaceLength) { multiplier = length / (2 * dashLength + spaceLength); dashLength *= multiplier; spaceLength *= multiplier; } else { numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength)); minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1); maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes; spaceLength = maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace) ? minSpace : maxSpace; } if (useLineDash) { if (style === 3 /* DOTTED */) { this.ctx.setLineDash([0, dashLength + spaceLength]); } else { this.ctx.setLineDash([dashLength, spaceLength]); } } if (style === 3 /* DOTTED */) { this.ctx.lineCap = 'round'; this.ctx.lineWidth = width; } else { this.ctx.lineWidth = width * 2 + 1.1; } this.ctx.strokeStyle = asString(color); this.ctx.stroke(); this.ctx.setLineDash([]); // dashed round edge gap if (style === 2 /* DASHED */) { if (isBezierCurve(boxPaths[0])) { path1 = boxPaths[3]; path2 = boxPaths[0]; this.ctx.beginPath(); this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]); this.ctx.stroke(); } if (isBezierCurve(boxPaths[1])) { path1 = boxPaths[1]; path2 = boxPaths[2]; this.ctx.beginPath(); this.formatPath([new Vector(path1.end.x, path1.end.y), new Vector(path2.start.x, path2.start.y)]); this.ctx.stroke(); } } this.ctx.restore(); return [2 /*return*/]; }); }); }; CanvasRenderer.prototype.render = function (element) { return __awaiter(this, void 0, void 0, function () { var stack; return __generator(this, function (_a) { switch (_a.label) { case 0: if (this.options.backgroundColor) { this.ctx.fillStyle = asString(this.options.backgroundColor); this.ctx.fillRect(this.options.x, this.options.y, this.options.width, this.options.height); } stack = parseStackingContexts(element); return [4 /*yield*/, this.renderStack(stack)]; case 1: _a.sent(); this.applyEffects([]); return [2 /*return*/, this.canvas]; } }); }); }; return CanvasRenderer; }(Renderer)); var isTextInputElement = function (container) { if (container instanceof TextareaElementContainer) { return true; } else if (container instanceof SelectElementContainer) { return true; } else if (container instanceof InputElementContainer && container.type !== RADIO && container.type !== CHECKBOX) { return true; } return false; }; var calculateBackgroundCurvedPaintingArea = function (clip, curves) { switch (clip) { case 0 /* BORDER_BOX */: return calculateBorderBoxPath(curves); case 2 /* CONTENT_BOX */: return calculateContentBoxPath(curves); case 1 /* PADDING_BOX */: default: return calculatePaddingBoxPath(curves); } }; var canvasTextAlign = function (textAlign) { switch (textAlign) { case 1 /* CENTER */: return 'center'; case 2 /* RIGHT */: return 'right'; case 0 /* LEFT */: default: return 'left'; } }; // see https://github.com/niklasvh/html2canvas/pull/2645 var iOSBrokenFonts = ['-apple-system', 'system-ui']; var fixIOSSystemFonts = function (fontFamilies) { return /iPhone OS 15_(0|1)/.test(window.navigator.userAgent) ? fontFamilies.filter(function (fontFamily) { return iOSBrokenFonts.indexOf(fontFamily) === -1; }) : fontFamilies; }; var ForeignObjectRenderer = /** @class */ (function (_super) { __extends(ForeignObjectRenderer, _super); function ForeignObjectRenderer(context, options) { var _this = _super.call(this, context, options) || this; _this.canvas = options.canvas ? options.canvas : document.createElement('canvas'); _this.ctx = _this.canvas.getContext('2d'); _this.options = options; _this.canvas.width = Math.floor(options.width * options.scale); _this.canvas.height = Math.floor(options.height * options.scale); _this.canvas.style.width = options.width + "px"; _this.canvas.style.height = options.height + "px"; _this.ctx.scale(_this.options.scale, _this.options.scale); _this.ctx.translate(-options.x, -options.y); _this.context.logger.debug("EXPERIMENTAL ForeignObject renderer initialized (" + options.width + "x" + options.height + " at " + options.x + "," + options.y + ") with scale " + options.scale); return _this; } ForeignObjectRenderer.prototype.render = function (element) { return __awaiter(this, void 0, void 0, function () { var svg, img; return __generator(this, function (_a) { switch (_a.label) { case 0: svg = createForeignObjectSVG(this.options.width * this.options.scale, this.options.height * this.options.scale, this.options.scale, this.options.scale, element); return [4 /*yield*/, loadSerializedSVG(svg)]; case 1: img = _a.sent(); if (this.options.backgroundColor) { this.ctx.fillStyle = asString(this.options.backgroundColor); this.ctx.fillRect(0, 0, this.options.width * this.options.scale, this.options.height * this.options.scale); } this.ctx.drawImage(img, -this.options.x * this.options.scale, -this.options.y * this.options.scale); return [2 /*return*/, this.canvas]; } }); }); }; return ForeignObjectRenderer; }(Renderer)); var loadSerializedSVG = function (svg) { return new Promise(function (resolve, reject) { var img = new Image(); img.onload = function () { resolve(img); }; img.onerror = reject; img.src = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg)); }); }; var Logger = /** @class */ (function () { function Logger(_a) { var id = _a.id, enabled = _a.enabled; this.id = id; this.enabled = enabled; this.start = Date.now(); } // eslint-disable-next-line @typescript-eslint/no-explicit-any Logger.prototype.debug = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (this.enabled) { // eslint-disable-next-line no-console if (typeof window !== 'undefined' && window.console && typeof console.debug === 'function') { // eslint-disable-next-line no-console console.debug.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args)); } else { this.info.apply(this, args); } } }; Logger.prototype.getTime = function () { return Date.now() - this.start; }; // eslint-disable-next-line @typescript-eslint/no-explicit-any Logger.prototype.info = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (this.enabled) { // eslint-disable-next-line no-console if (typeof window !== 'undefined' && window.console && typeof console.info === 'function') { // eslint-disable-next-line no-console console.info.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args)); } } }; // eslint-disable-next-line @typescript-eslint/no-explicit-any Logger.prototype.warn = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (this.enabled) { // eslint-disable-next-line no-console if (typeof window !== 'undefined' && window.console && typeof console.warn === 'function') { // eslint-disable-next-line no-console console.warn.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args)); } else { this.info.apply(this, args); } } }; // eslint-disable-next-line @typescript-eslint/no-explicit-any Logger.prototype.error = function () { var args = []; for (var _i = 0; _i < arguments.length; _i++) { args[_i] = arguments[_i]; } if (this.enabled) { // eslint-disable-next-line no-console if (typeof window !== 'undefined' && window.console && typeof console.error === 'function') { // eslint-disable-next-line no-console console.error.apply(console, __spreadArray([this.id, this.getTime() + "ms"], args)); } else { this.info.apply(this, args); } } }; Logger.instances = {}; return Logger; }()); var Context = /** @class */ (function () { function Context(options, windowBounds) { var _a; this.windowBounds = windowBounds; this.instanceName = "#" + Context.instanceCount++; this.logger = new Logger({ id: this.instanceName, enabled: options.logging }); this.cache = (_a = options.cache) !== null && _a !== void 0 ? _a : new Cache(this, options); } Context.instanceCount = 1; return Context; }()); var html2canvas = function (element, options) { if (options === void 0) { options = {}; } return renderElement(element, options); }; if (typeof window !== 'undefined') { CacheStorage.setContext(window); } var renderElement = function (element, opts) { return __awaiter(void 0, void 0, void 0, function () { var ownerDocument, defaultView, resourceOptions, contextOptions, windowOptions, windowBounds, context, foreignObjectRendering, cloneOptions, documentCloner, clonedElement, container, _a, width, height, left, top, backgroundColor, renderOptions, canvas, renderer, root, renderer; var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t; return __generator(this, function (_u) { switch (_u.label) { case 0: if (!element || typeof element !== 'object') { return [2 /*return*/, Promise.reject('Invalid element provided as first argument')]; } ownerDocument = element.ownerDocument; if (!ownerDocument) { throw new Error("Element is not attached to a Document"); } defaultView = ownerDocument.defaultView; if (!defaultView) { throw new Error("Document is not attached to a Window"); } resourceOptions = { allowTaint: (_b = opts.allowTaint) !== null && _b !== void 0 ? _b : false, imageTimeout: (_c = opts.imageTimeout) !== null && _c !== void 0 ? _c : 15000, proxy: opts.proxy, useCORS: (_d = opts.useCORS) !== null && _d !== void 0 ? _d : false }; contextOptions = __assign({ logging: (_e = opts.logging) !== null && _e !== void 0 ? _e : true, cache: opts.cache }, resourceOptions); windowOptions = { windowWidth: (_f = opts.windowWidth) !== null && _f !== void 0 ? _f : defaultView.innerWidth, windowHeight: (_g = opts.windowHeight) !== null && _g !== void 0 ? _g : defaultView.innerHeight, scrollX: (_h = opts.scrollX) !== null && _h !== void 0 ? _h : defaultView.pageXOffset, scrollY: (_j = opts.scrollY) !== null && _j !== void 0 ? _j : defaultView.pageYOffset }; windowBounds = new Bounds(windowOptions.scrollX, windowOptions.scrollY, windowOptions.windowWidth, windowOptions.windowHeight); context = new Context(contextOptions, windowBounds); foreignObjectRendering = (_k = opts.foreignObjectRendering) !== null && _k !== void 0 ? _k : false; cloneOptions = { allowTaint: (_l = opts.allowTaint) !== null && _l !== void 0 ? _l : false, onclone: opts.onclone, ignoreElements: opts.ignoreElements, inlineImages: foreignObjectRendering, copyStyles: foreignObjectRendering }; context.logger.debug("Starting document clone with size " + windowBounds.width + "x" + windowBounds.height + " scrolled to " + -windowBounds.left + "," + -windowBounds.top); documentCloner = new DocumentCloner(context, element, cloneOptions); clonedElement = documentCloner.clonedReferenceElement; if (!clonedElement) { return [2 /*return*/, Promise.reject("Unable to find element in cloned iframe")]; } return [4 /*yield*/, documentCloner.toIFrame(ownerDocument, windowBounds)]; case 1: container = _u.sent(); _a = isBodyElement(clonedElement) || isHTMLElement(clonedElement) ? parseDocumentSize(clonedElement.ownerDocument) : parseBounds(context, clonedElement), width = _a.width, height = _a.height, left = _a.left, top = _a.top; backgroundColor = parseBackgroundColor(context, clonedElement, opts.backgroundColor); renderOptions = { canvas: opts.canvas, backgroundColor: backgroundColor, scale: (_o = (_m = opts.scale) !== null && _m !== void 0 ? _m : defaultView.devicePixelRatio) !== null && _o !== void 0 ? _o : 1, x: ((_p = opts.x) !== null && _p !== void 0 ? _p : 0) + left, y: ((_q = opts.y) !== null && _q !== void 0 ? _q : 0) + top, width: (_r = opts.width) !== null && _r !== void 0 ? _r : Math.ceil(width), height: (_s = opts.height) !== null && _s !== void 0 ? _s : Math.ceil(height) }; if (!foreignObjectRendering) return [3 /*break*/, 3]; context.logger.debug("Document cloned, using foreign object rendering"); renderer = new ForeignObjectRenderer(context, renderOptions); return [4 /*yield*/, renderer.render(clonedElement)]; case 2: canvas = _u.sent(); return [3 /*break*/, 5]; case 3: context.logger.debug("Document cloned, element located at " + left + "," + top + " with size " + width + "x" + height + " using computed rendering"); context.logger.debug("Starting DOM parsing"); root = parseTree(context, clonedElement); if (backgroundColor === root.styles.backgroundColor) { root.styles.backgroundColor = COLORS.TRANSPARENT; } context.logger.debug("Starting renderer for element at " + renderOptions.x + "," + renderOptions.y + " with size " + renderOptions.width + "x" + renderOptions.height); renderer = new CanvasRenderer(context, renderOptions); return [4 /*yield*/, renderer.render(root)]; case 4: canvas = _u.sent(); _u.label = 5; case 5: if ((_t = opts.removeContainer) !== null && _t !== void 0 ? _t : true) { if (!DocumentCloner.destroy(container)) { context.logger.error("Cannot detach cloned iframe as it is not in the DOM anymore"); } } context.logger.debug("Finished rendering"); return [2 /*return*/, canvas]; } }); }); }; var parseBackgroundColor = function (context, element, backgroundColorOverride) { var ownerDocument = element.ownerDocument; // http://www.w3.org/TR/css3-background/#special-backgrounds var documentBackgroundColor = ownerDocument.documentElement ? parseColor(context, getComputedStyle(ownerDocument.documentElement).backgroundColor) : COLORS.TRANSPARENT; var bodyBackgroundColor = ownerDocument.body ? parseColor(context, getComputedStyle(ownerDocument.body).backgroundColor) : COLORS.TRANSPARENT; var defaultBackgroundColor = typeof backgroundColorOverride === 'string' ? parseColor(context, backgroundColorOverride) : backgroundColorOverride === null ? COLORS.TRANSPARENT : 0xffffffff; return element === ownerDocument.documentElement ? isTransparent(documentBackgroundColor) ? isTransparent(bodyBackgroundColor) ? defaultBackgroundColor : bodyBackgroundColor : documentBackgroundColor : defaultBackgroundColor; }; return html2canvas; }))); //# sourceMappingURL=html2canvas.js.map

APEX Invoice Generator

โ— Connecting...
Last Invoice: โ€”
๐Ÿ—‚ Invoice Information
๐Ÿ‘ค Consignee / Ship To (from Client Tracker)
๐Ÿงพ Buyer / Bill To
๐Ÿšš Delivery Details
๐Ÿ“‹ Project Details (from Project Tracker)
๐Ÿ“ฆ Line Items
Description HSN/SAC Qty Unit Rate โ‚น Amount โ‚น
๐Ÿ’ฐ Financials
CGST+SGST split auto-shown in invoice

๐Ÿ’ฐ Deductions & Debit Notes

๐Ÿฆ Bank Details (for Invoice)
๐Ÿ“ Notes
๐Ÿ“„ Live Preview